<template>
    <div ref="s">
        <!-- 头部导航，可以回到首页 -->
        <div class="search-nav">
            <div 
                class="btn-index"
                @click="goIndex">
                <i class="fa fa-desktop" aria-hidden="true"></i> 返回首页
            </div>
            <div class="title">搜索</div>
        </div>
        <!-- 查询书籍 -->
        <div class="search-input">
            <input v-model="inputText" type="text" placeholder="请输入关键字">
            <div @click="searching" class="btn">
                <i class="fa fa-search"></i>
            </div>
        </div>
        <!-- 查询结果 -->
        <!-- 结果的标题 -->
        <div class="result-title" v-if='searchText.length > 0'>
            <span>1</span> 搜索“{{searchText}}”的结果：
        </div>
        <!-- 结果的内容 -->
        <div class="result-item">
            <searchItem :itemData='bookList'></searchItem>
        </div>
        <!-- 加载多一页 -->
        <div @click="addItem" class="btn-add-item" v-if="pageNow < pageNum">加载更多</div>
        <div class="btn-add-item" v-if="pageNow >= pageNum">没有更多了就(～￣▽￣)～</div>
    </div>
</template>

<script>
import searchItem from "@/components/searchItem.vue"
export default {
    name: 'search',
    components: {
        searchItem,
    },
    data() {
        return {
            inputText: '', //接收输入的搜索文字
            searchText: '', //进行了搜索的文字
            pageNum: 0, //搜索结果一共有多少页
            pageNow: 100, //现在看到结果的页数
            bookList: [], //放置显示的书籍
        }
    },
    mounted() {
        // console.log(this.$route.query);
        if(this.$route.query.inputTxt) {
            this.inputText = this.$route.query.inputTxt;
            this.searching();
        }
    },
    methods: {
        // 回到首页逻辑
        goIndex() {
            // console.log(this.$router);
            this.$router.push({path:'/'})
        },
        // 点击查询逻辑
        searching() {
            // console.log(this.inputText);
            // 进行查询
            // 判断输入的字符串长度
            if(this.inputText.length > 0){
                this.$jsonp('https://m.zongheng.com/h5/ajax/search',{
                    h5:'1',
                    keywords:this.inputText,
                    pageNum:'1',
                    field:'all',
                    pageCount:'5',
                    callback:'jsonp1',
                }).then((res)=>{
                    // console.log(res);
                    this.searchText = this.inputText;
                    this.pageNum = res.searchlist.pageCount;
                    this.pageNow = 1;
                    let arr = res.searchlist.searchBooks;
                    this.bookList = [];
                    if(arr != undefined && arr.length != undefined && arr.length > 0){
                        this.bookList = this.bookList.concat(arr);
                        // console.log(this.bookList);
                    }

                })
            } else {
                // 字符串长度为0，清空输出的列表
                this.bookList = [];
                this.searchText = '';
                this.pageNum = 0;
                this.pageNow = 0;
            }
        },
        addItem() {
            this.pageNow ++; 
            // console.log('pageNow' ,this.pageNow);
            if(this.pageNow <= this.pageNum) {
                this.$jsonp('https://m.zongheng.com/h5/ajax/search',{
                    h5:'1',
                    keywords:this.inputText,
                    pageNum:this.pageNow,
                    field:'all',
                    pageCount:'5',
                    callback:'jsonp'+this.pageNow,
                }).then((res)=>{
                    let arr = res.searchlist.searchBooks;
                    this.bookList = this.bookList.concat(arr);
                    // console.log(this.bookList);
                })
            }
        },
    }, 
}
</script>

<style lang="scss" scoped>
.search-nav {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    position: relative;
    background-color: #333;
    .title {
        width: 100%;
        font-size: 20px;
        color: white;
    }
    .btn-index {
        color: #ccc;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}
.search-input {
    display: flex;
    padding: 30px 10px;
    height: 30px;
    background-color: #F2F2F2;
    input {
        height: 30px;
        box-sizing: border-box;
        width: 90%;
        padding-left: 15px;
        border-radius: 0;
        border: 1px solid #ccc;
    }
    .btn {
        font-size: 16px;
        text-align: center;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background-color: #FF4643;
        color: white;
    }
}
.result-title {
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    color: #999;
    padding: 12px 8px 0 8px;
    span {
        display: inline-block;
        width: 10px;
        height: 14px;
        background-color: #999;
    }
}

.btn-add-item {
    width: 90%;
    margin: 10px auto;
    border: 1px #ccc solid; 
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
}
</style>